<div class="page" data-ng-controller="flotChartCtrl">


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Line and Area Charts</h2>
        </div>
        <div class="col-md-12">

            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div data-flot-chart
                                 data-data="line1.data"
                                 data-options="line1.options"
                                 style="width: 100%; height: 350px;"
                                 ></div>

                        </div>
                    </div>            
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div data-flot-chart
                                 data-data="area.data"
                                 data-options="area.options"
                                 style="width: 100%; height: 350px;"
                                 ></div>
                        </div>
                    </div>               
                </div>
            </div>

        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Bar Charts</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div data-flot-chart
                                 data-data="barChartCleanH.data"
                                 data-options="barChartCleanH.options"
                                 style="width: 100%; height: 350px;"
                                 ></div>
                        </div>
                    </div>            
                </div>

                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div data-flot-chart
                                 data-data="barChartCleanV.data"
                                 data-options="barChartCleanV.options"
                                 style="width: 100%; height: 350px;"
                                 ></div>
                        </div>
                    </div>            
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div data-flot-chart
                                 data-data="barChartStacked.data"
                                 data-options="barChartStacked.options"
                                 style="width: 100%; height: 300px;"
                                 ></div>
                            <span class="panel-label">Stacked</span>
                        </div>
                    </div> 
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div data-flot-chart
                                 data-data="barChartVertical.data"
                                 data-options="barChartVertical.options"
                                 style="width: 100%; height: 300px;"
                                 ></div>
                            <span class="panel-label">Vertical</span>
                        </div>
                    </div> 
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div data-flot-chart
                                 data-data="barChartHorizontal.data"
                                 data-options="barChartHorizontal.options"
                                 style="width: 100%; height: 300px;"
                                 ></div>
                            <span class="panel-label">Horizontal</span>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Combo Charts</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div data-flot-chart
                                 data-data="area1.data"
                                 data-options="area1.options"
                                 style="width: 100%; height: 350px;"
                                 ></div>
                        </div>
                    </div>               
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div data-flot-chart
                                 data-data="area2.data"
                                 data-options="area2.options"
                                 style="width: 100%; height: 350px;"
                                 ></div>
                        </div>
                    </div>            
                </div>
            </div>
        </div>
    </div>
    



    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Pie and Donut Charts</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div data-flot-chart
                                 data-data="pieChart.data"
                                 data-options="pieChart.options"
                                 style="width: 100%; height: 300px;"
                                 ></div>
                            <span class="panel-label">Pie Chart</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div data-flot-chart
                                 data-data="donutChart.data"
                                 data-options="donutChart.options"
                                 style="width: 100%; height: 300px;"
                                 ></div>
                            <span class="panel-label">Donut Chart</span>
                        </div>
                    </div>            
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div data-flot-chart
                                 data-data="donutChartHarmony.data"
                                 data-options="donutChartHarmony.options"
                                 style="width: 100%; height: 300px;"
                                 ></div>
                            <span class="panel-label">Styled Donut Chart</span>
                        </div>
                    </div>             
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Realtime Chart</h2>
        </div>
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div data-flot-chart-realtime
                         data-type="realtime"
                         style="width: 100%; height: 500px;"
                         ></div>
                </div>
            </div>
        </div>
    </div>

</div>